<template>
	<div id="home">
		<div style="height: 100%;" v-if="routers.indexOf($route.path) == -1 && $route.path.substring(0,13) != '/user/details'">
			<mt-popup v-model="open" position="left" class="homeMenu">
				<van-sidebar v-model="menuName">
					<van-sidebar-item v-for="item in routerArr" :title="item.text" @click.native="open=false;$router.push(item.path)" :key="item.id"></van-sidebar-item>
				</van-sidebar>
				<!-- <mt-cell :title="item.text" :to="item.path" is-link v-for="item in routerArr" @click.native="open=false">
				</mt-cell> -->
			</mt-popup>
			<mt-header title="信合红谷">
				<i class="el-icon-s-operation" slot="left" @click="open=open?false:true"></i>
				<i class="el-icon-s-custom" slot="right" @click="show=true"></i>
			</mt-header>
			<van-action-sheet v-model="show" :actions="actions" @select="onSelect" />
			<a href="tel:13164620214"><van-button v-show="showAddBtn"  icon="phone" color="linear-gradient(to right, #4bb0ff, #1989fa)" class="add-invoice" /></a>
			<!-- 缓存 -->
			<nuxt-child keep-alive />
		</div>
		<div style="height: 100%;" v-else>
			<!-- 缓存 -->
			<nuxt-child keep-alive />
		</div>
	</div>
</template>

<script>
import warterMark from '~/util/warterMark'
	export default {
		data() {
			return {
				actions: [
					// {
					// 	name: '选项',
					// 	path:'/user/set/resetPw'
					// },
					{
						name: '修改密码',
						path: '/user/set/updatePwd'
					},
					{
						name: '修改资料',
						path: '/user/set/userData'
					},
					{
						name: '修改手机号',
						path: '/user/set/verifyPhone'
					},
					{
						name: '退出',
						path: 'exit'
					},
				],
				show: false,
				showAddBtn: true,
				open: false,
				routerArr: [{
					path: '/user/myOrder',
					text: '我的订单'
				}, {
					path: '/user/invoicesManagement',
					text: '我的发票'
				}, {
					path: '/user/patent',
					text: '我的专利'
				}],
				routers: ['/user/apply', '/user/details', '/user/details2', '/user/invoice', '/user/patentDetails', '/user/refund', '/user/register',
					'/user/addorEditInvoices',"/user/agreement"], //不需要嵌套在本页面（即覆盖当前vue组件内容）的子路由及其组件
				menuName: 0,
				userIndex: 0,
				users: [{
						text: '默认排序',
						value: 0,
						path: '/user/set/resetPw'
					},
					{
						text: '默认排序',
						value: 1,
						path: '/user/set/resetPw'
					},
					{
						text: '默认排序',
						value: 2,
						path: '/user/set/resetPw'
					},
					{
						text: '默认排序',
						value: 3,
						path: '/user/set/resetPw'
					}
				]
			}
		},
		created() {
			if (this.$route.path == '/user') {
				this.$router.replace('/user/myOrder');
			} else if (this.$route.path == '/user/myOrder') {
				this.menuName = 0;
			} else if (this.$route.path == '/user/invoicesManagement') {
				this.menuName = 1;
			}
		},
		mounted() {
			console.log(this.$route.path, 'path')
			if(this.$route.path !== '/user/apply'){
				warterMark.set(this.$store.state.user.name)
			}else{
				warterMark.set('')
			}
		},
		methods: {
			onSelect(item) {
				this.show = false;
				if (item.path != 'exit') {
					this.$router.push(item.path)
				} else {
					this.exit();
				}
			},
			//退出登录
			exit() {
				let that = this;
				this.$dialog.confirm({
					title: '提示',
					message: '是否退出登录?'
				})
				.then(() => {
					warterMark.set('')
					that.$cookies.remove('user');
					that.$cookies.remove('token');
					that.$store.commit("delUser");
					that.$axios.defaults.headers.common["Authorization"] = "";
					this.$router.push({
						path: "/"
					})
					
				})
				.catch(() => {});
			},
			goUpdateUser(path) {
				this.$router.push(path)
			},
			handleSelect() {}
		},
		watch: {
			$router: function() {
				if (this.$router.path == '/user/invoicesManagement') {
					this.showAddBtn = true;
				} else {
					this.showAddBtn = fasle;
				}
			}
		}
	}
</script>


<style lang="less">
	#home {
		background: #f5f4f4;
		height: 100%;

		.mintui {
			font-size: 26px !important;
			/*no*/
		}

		[class^=el-icon-] {
			font-size: 26px !important;
			/*no*/
		}

		.homeMenu {
			height: 100%;
			margin: 0 !important;
			padding: 0 !important;
		}

		.van-sidebar-item--select {
			border-color: #26a2ff;
		}

		.add-invoice {
			display: block;
			border-radius: 100%;
			z-index: 100;
			bottom: 80px;
			right: 36px;
			position: fixed;
		}
	}
</style>
